<template>
  <div class="vehicle-detail">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="0">
          <el-row>
            <el-form label-width="100px" :disabled="isEdit" :class="isEdit?'userForm':''">
              <el-col :span="8">
                <el-form-item label="车辆编号:">
                  <el-input v-model="trackInfo.id" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车辆号码:">
                  <el-input v-model="trackInfo.licensePlate" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车型名称:">
                  <el-input v-model="trackInfo.truckTypeName" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车辆体积:">
                  <el-input v-model="trackInfo.allowableVolume" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车辆载重:">
                  <el-input v-model="trackInfo.allowableLoad" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="GPSID:">
                  <el-input v-model="trackInfo.deviceGpsId" />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="图片信息">
                  <!-- <img v-if="isEdit" src="@/assets/img/hcbgi.png" alt="" style="width:212px;height:159px"> -->
                  <el-image
                    v-show="isEdit"
                    style="width: 212; height: 159px;border-radius:5px"
                    :src="trackInfo.picture"
                  >
                    <template #error>
                      <img src="@/assets/img/hcbgi.png" alt="" style="width:212px;height:159px">
                    </template>
                  </el-image>
                  <div v-show="!isEdit" style="display:flex">
                    <div>
                      <img src="@/assets/img/zhengmian.png" alt="" style="width:212px;height:159px;margin-right:15px">
                      <img src="@/assets/img/cemian.png" alt="" style="width:212px;height:159px;margin-right:15px">
                    </div>
                    <ImageUpload ref="truckImage" />
                  </div>

                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="行驶证信息" name="1">
          <el-row>
            <el-form label-width="120px" :disabled="isEdit" :class="isEdit?'userForm':''">
              <el-col :span="8">
                <el-form-item label="行驶证号码:">
                  <el-input placeholder="--" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发动机号码:">
                  <el-input placeholder="--" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="注册时间:">
                  <el-input placeholder="--" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="强制报废日期:">
                  <el-input placeholder="--" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="整备质量:">
                  <el-input placeholder="0吨" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="检验有效期:">
                  <el-input placeholder="--" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="核定载质量:">
                  <el-input placeholder="--" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="有效期:">
                  <el-input placeholder="--" />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="图片信息">
                  <img v-if="isEdit" src="@/assets/img/hcbgi.png" alt="" style="width:212px;height:159px">
                  <div v-else style="display:flex">
                    <div>
                      <img src="@/assets/img/zhuye.png" alt="" style="width:212px;height:159px;margin-right:15px">
                      <img src="@/assets/img/fuye.png" alt="" style="width:212px;height:159px;margin-right:15px">
                    </div>
                    <ImageUpload />
                  </div>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-row v-if="isEdit" type="flex" justify="center" class="footer">
      <el-button type="primary" @click="editUser">编辑</el-button>
    </el-row>
    <el-row v-else type="flex" justify="center" class="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="primary" @click="cancel">取消</el-button>
    </el-row>
  </div>
</template>

<script>
import { editTruckDetail, getTruckDetail } from '@/api/transit'
export default {
  data() {
    return {
      activeName: '0',
      trackInfo: {},
      isEdit: true
    }
  },
  created() {
    this.getTrackInfo()
  },
  methods: {
    async getTrackInfo() {
      this.trackInfo = await getTruckDetail(this.$route.query.id)
      if (!this.trackInfo.picture) return
      this.$refs.truckImage.fileList = [{ url: this.trackInfo.picture }]
    },
    editUser() {
      this.isEdit = false
    },
    // 取消
    cancel() {
      this.isEdit = true
    },
    handleClick() {
      this.isEdit = true
    },
    // 保存车辆详情
    async save() {
      if (this.activeName === '0') {
        const fileList = this.$refs.truckImage.fileList
        await editTruckDetail({ ...this.trackInfo, picture: fileList.map(item => item.url).toString() })
        this.$message.success('更新成功')
      }
    }
    // 展示实例图
  }
}
</script>

<style lang="scss" scoped>
.truckAs{
  display: none;
}

.vehicle-detail{
  position: relative;
  .el-card{
    height: calc(100vh - 200px);
    margin: 12px 12px 0;
    padding: 0 24px;
    overflow: hidden;
    .el-tabs{
      ::v-deep .el-tabs__item{
        &.is-active{
          font-size: 16px;
          font-weight: 700;
          color: #20232a !important;
        }
      }
    }
  }
  .footer{
    position: absolute;
    margin:0 12px;
    padding: 30px 0 16px;
    bottom: 0px;
    width: 100%;
    border-top: 1px solid #e5e7ec;
    background-color: #fff;
  }
  .userForm{
    ::v-deep .el-input__inner {
    border: none;
    background-color: #fff;
    color: #20232a;
    }
  }
}
</style>
